import * as echarts from "echarts";
import styles from "../index.module.less";
export default defineComponent({
  props: {
    yesterday_hour_list: {
      type: Array,
      default: () => [],
    },
    today_hour_list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { expose }) {
    const _self = reactive<any>(getCurrentInstance());
    const { today_hour_list, yesterday_hour_list } = toRefs<any>(props);

    const drawEchart = () => {
      const maxyAxisValue = Math.max(
        ...[
          ...yesterday_hour_list.value.map((item: any) =>
            (item.amount / 100).toFixed(2)
          ),
          ...today_hour_list.value.map((item: any) =>
            (item.amount / 100).toFixed(2)
          ),
        ]
      );
      const minyAxisValue = Math.min(
        ...[
          ...yesterday_hour_list.value.map((item: any) =>
            (item.amount / 100).toFixed(2)
          ),
          ...today_hour_list.value.map((item: any) =>
            (item.amount / 100).toFixed(2)
          ),
        ]
      );

      let option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            let string = "";
            params.forEach((item, index) => {
              if (index === 0) {
                string += `时间：${item.dataIndex}点<br/>`;
              }
              string += `${item.marker}${item.seriesName}: ${item.data}元`;
              string += index === params.length - 1 ? "" : "<br/>";
            });
            return string;
          },
        },
        legend: {
          data: [$t("overview0"), $t("overview1")],
        },
        grid: {
          left: 16,
          right: 40,
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: today_hour_list.value.map((item: any) => item.hour),

          name: "时间",
          nameTextStyle: {
            lineHeight: 30,
            verticalAlign: "top",
          },
          axisLine: {
            symbol: [
              "none",
              "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ",
            ],
            symbolOffset: 10,
            symbolSize: [35, 38],
            lineStyle: {
              color: "#909090",
            },
          },
        },
        yAxis: {
          type: "value",
          max: maxyAxisValue,
          min: minyAxisValue,
          interval: Math.ceil((maxyAxisValue - minyAxisValue) / 5),
          axisLabel: {
            formatter: (value) => value,
          },

          name: "金额",
          nameLocation: "end",
          nameTextStyle: {
            padding: [0, 0, 0, -40],
          },
          alignTicks: true,
          axisLine: {
            symbol: [
              "none",
              "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ",
            ],
            symbolSize: [35, 38],
            symbolOffset: 10,
            show: true,
            lineStyle: {
              color: "#909090",
            },
          },
        },
        series: [
          {
            name: $t("overview0"),
            type: "line",
            data: today_hour_list.value.map((item: any) =>
              (item.amount / 100).toFixed(2)
            ),
          },
          {
            name: $t("overview1"),
            type: "line",
            data: yesterday_hour_list.value.map((item: any) =>
              (item.amount / 100).toFixed(2)
            ),
          },
        ],
      };
      const el: any = _self.refs["timely_fact"];
      const _this: any = echarts.init(el);
      _this.setOption(option);
      window.addEventListener("resize", () => _this.resize());
    };
    const initPage = () => drawEchart();
    expose({ initPage });
    return () => <div class={styles.timely_fact_chart} ref="timely_fact"></div>;
  },
});
